<template>
	<view class="content">
		<view class="header">
			<view class=""></view>
			<view class="header-right" @tap="$navTo('/pagesB/securityCheck/dangerReport?status=1')">
				<image src="/static/add.png" mode=""></image>
				<text>隐患上报</text>
			</view>
		</view>
		<view class="ipts">
			<view class="record">
				<view class="">
					<image src="/static/jilu.png" mode=""></image>
					<text>用户信息</text>
				</view>

			</view>
			<!-- 户号 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>档案号</text>
				</view>
				<text class="place-class">{{user_info.meter_num}}</text>
			</view>
			<!-- 用户姓名 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>用户姓名</text>
				</view>
				<text class="place-class">{{user_info.realname}}</text>
			</view>
			<!-- 户主姓名 -->
			<!-- <view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>户主姓名</text>
				</view>
				<text class="place-class">{{user_info.realname}}</text>
			</view> -->

			<!-- 身份证号 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>身份证号</text>
				</view>
				<text class="place-class">{{user_info.ID_num}}</text>
			</view>

			<!-- 联系方式 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>联系方式</text>
				</view>
				<view class="" style="display: flex;align-items: center;">
					<image src="/static/pagesB/tel.png" mode=""></image>
					<text class="place-class">{{user_info.mobile}}</text>
				</view>


			</view>

			<!-- 地址 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>地址</text>
				</view>
				<text class="place-class">{{user_info.address}}</text>
			</view>
			<!-- 通气日期 -->
			<!-- <view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>通气日期</text>
				</view>
				<text class="place-class">2021.02.12</text>
			</view> -->
		</view>
		<!-- 第二块 -->
		<view class="ipts">
			<!-- {调压}计量柜品牌 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>(调压)计量柜品牌</text>
				</view>
				<view class="flex alcenter" @tap="show1 = true">
					<input class="item-ipt" type="text" disabled v-model="list.meterage_brand" placeholder="请选择计量柜品牌" />
					<u-icon color="#999999" name="arrow-right"></u-icon>
					<u-select v-model="show1" label-name="name" value-name="id" :list="option1"
						@confirm="confirm($event,'meterage_brand')"></u-select>
				</view>
			</view>
			<!-- 供气压力 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>供气压力</text>
				</view>
				<input class="item-ipt" type="text" v-model="list.inlet_pressure" placeholder="请选择供气压力" />
			</view>
			<!-- 远传产品品牌 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>远传产品品牌</text>
				</view>
				<view class="flex alcenter" @tap="show2 = true">
					<input class="item-ipt" type="text" disabled v-model="list.product_brand" placeholder="请输入远传产品品牌" />
					<u-icon color="#999999" name="arrow-right"></u-icon>
					<u-select v-model="show2" label-name="name" value-name="id" :list="option2"
						@confirm="confirm($event,'product_brand')"></u-select>
				</view>
			</view>
			<!-- 远传产品编号 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>远传产品编号</text>
				</view>
				<input class="item-ipt" type="text" v-model="list.product_number" placeholder="请输入远传产品编号" />
			</view>
			<!-- 流量计品牌 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>流量计品牌</text>
				</view>
				<view class="flex alcenter" @tap="show3 = true">
					<input class="item-ipt" type="text" disabled v-model="list.flow_brand" placeholder="请输入流量计品牌" />
					<u-icon color="#999999" name="arrow-right"></u-icon>
					<u-select v-model="show3" label-name="name" value-name="id" :list="option3"
						@confirm="confirm($event,'flow_brand')"></u-select>
				</view>
			</view>
			<!-- 流量计类型 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>流量计类型</text>
				</view>
				<view class="flex alcenter" @tap="show4 = true">
					<input class="item-ipt" type="text" disabled v-model="list.flow_type" placeholder="请选择流量计类型" />
					<u-icon color="#999999" name="arrow-right"></u-icon>
					<u-select v-model="show4" label-name="name" value-name="id" :list="option4"
						@confirm="confirm($event,'flow_type')"></u-select>
				</view>
			</view>
			<!-- 流量计型号 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>流量计型号</text>
				</view>
				<view class="flex alcenter" @tap="show5 = true">
					<input class="item-ipt" type="text" disabled v-model="list.flow_model" placeholder="请选择流量计型号" />
					<u-icon color="#999999" name="arrow-right"></u-icon>
					<u-select v-model="show5" label-name="name" value-name="id" :list="option5"
						@confirm="confirm($event,'flow_model')"></u-select>
				</view>
			</view>
			<!-- 流量计编号 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>流量计编号</text>
				</view>
				<input class="item-ipt" type="text" v-model="list.flow_number" placeholder="请输入流量计编号" />
			</view>
			<!-- 机械表底数 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>机械表底数</text>
				</view>
				<input class="item-ipt" type="text" v-model="list.mechanical_base" placeholder="请输入机械表底数" />
			</view>
			<!-- 修正仪编号 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>修正仪编号</text>
				</view>
				<input class="item-ipt" type="text" v-model="list.corrector_number" placeholder="请输入修正仪编号" />
			</view>
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>修正仪底数</text>
				</view>
				<input class="item-ipt" type="text" v-model="list.corrector_base" placeholder="请输入修正仪底数" />
			</view>
			<!-- 本次检定日期 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>本次检定日期</text>
				</view>
				<view class="flex alcenter" @tap="show6 = true">
					<input class="item-ipt" type="text" disabled v-model="list.this_time" placeholder="请选择本次检定日期" />
					<u-icon color="#999999" name="arrow-right"></u-icon>
					<u-picker v-model="show6" mode="time" :params="params" @confirm="times($event,'this_time')">
					</u-picker>
				</view>
			</view>
			<!-- 下次检定日期 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>下次检定日期</text>
				</view>
				<view class="flex alcenter" @tap="show7 = true">
					<input class="item-ipt" type="text" disabled v-model="list.next_time" placeholder="请选择下次检定日期" />
					<u-icon color="#999999" name="arrow-right"></u-icon>
					<u-picker v-model="show7" mode="time" :params="params" @confirm="times($event,'next_time')">
					</u-picker>
				</view>
			</view>
			<!-- 油量 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>油量</text>
				</view>
				<input class="item-ipt" type="text" v-model="list.petrol" placeholder="油量" />
			</view>
			<!-- 燃气具品牌 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>燃气具品牌</text>
				</view>
				<input class="item-ipt" type="text" v-model="list.gas_brand" placeholder="品牌" />
			</view>
			<!-- 然机具种类 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>燃机具种类</text>
				</view>
				<input class="item-ipt" type="text" v-model="list.gas_type" placeholder="种类" />
			</view>
			<!-- 功率 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>功率</text>
				</view>
				<input class="item-ipt" type="text" v-model="list.power" placeholder="功率(w)" />
			</view>
			<!-- 流量计照片 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>流量计照片</text>
				</view>
				<view class="addform-items">
					<view class="" style="position: relative;" v-for="(i,index) in list.flow_images">
						<image class="form-img" :src="$img + i" :key="index" @tap="seeimg(list.flow_images,index)">
						</image>
						<image class="delet" src="/static/delet.png" mode="" @tap="deletImg(list.flow_images,index)">
						</image>
					</view>
					<view class="add" @tap="choosefrom('flow_images')">
						<u-icon name="camera" color="#999999" size="28"></u-icon>
					</view>
				</view>
			</view>
			<!-- 燃气火点照片 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>燃气火点照片</text>
				</view>
				<view class="addform-items">
					<view class="" style="position: relative;" v-for="(i,index) in list.gas_fire_images">
						<image class="form-img" :src="$img +i" :key="index" @tap="seeimg(list.gas_fire_images,index)">
						</image>
						<image class="delet" src="/static/delet.png" mode=""
							@tap="deletImg(list.gas_fire_images,index)"></image>
					</view>
					<view class="add" @tap="choosefrom('gas_fire_images')">
						<u-icon name="camera" color="#999999" size="28"></u-icon>
					</view>
				</view>
			</view>
			<!-- 资料照片 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>资料照片</text>
				</view>
				<view class="addform-items">
					<view class="" style="position: relative;" v-for="(i,index) in list.data_images">
						<image class="form-img" :src="$img +i" :key="index" @tap="seeimg(list.data_images,index)">
						</image>
						<image class="delet" src="/static/delet.png" mode="" @tap="deletImg(list.data_images,index)">
						</image>
					</view>
					<view class="add" @tap="choosefrom('data_images')">
						<u-icon name="camera" color="#999999" size="28"></u-icon>
					</view>
				</view>
			</view>
			<!-- 设备照片 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>设备照片</text>
				</view>
				<view class="addform-items">
					<view class="" style="position: relative;" v-for="(i,index) in list.equipment_images">
						<image class="form-img" :src="$img +i" :key="index" @tap="seeimg(list.equipment_images,index)">
						</image>
						<image class="delet" src="/static/delet.png" mode=""
							@tap="deletImg(list.equipment_images,index)"></image>
					</view>
					<view class="add" @tap="choosefrom('equipment_images')">
						<u-icon name="camera" color="#999999" size="28"></u-icon>
					</view>
				</view>
			</view>
			<!-- 其他照片 -->
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>其他照片</text>
				</view>
				<view class="addform-items">
					<view class="" style="position: relative;" v-for="(i,index) in list.other_images">
						<image class="form-img" :src="$img +i" :key="index" @tap="seeimg(list.other_images,index)">
						</image>
						<image class="delet" src="/static/delet.png" mode="" @tap="deletImg5(list.other_images,index)">
						</image>
					</view>
					<view class="add" @tap="choosefrom('other_images')">
						<u-icon name="camera" color="#999999" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>电子签名</text>
				</view>
				<view class="addform-items">
					<view class="" style="position: relative;" v-if="signature">
						<image class="form-img" :src="signature.intact_url" @tap="seek(signature.intact_url)">
						</image>
						<image class="delet" src="/static/delet.png" @tap="signature=''" mode="">
						</image>
					</view>
					<view class="add" v-if="signature==''" @tap="$navTo('./sign')">
						<u-icon name="plus" color="#999999" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="supplement">
				<view class="info-item" style="border-bottom: 0;">
					<view class="info-item-left">
						<view class="dot"></view>
						<text>备注</text>
					</view>
					<!-- <text class="place-class">添加备注</text> -->
				</view>
				<view class="explain">
					<textarea v-model="list.remarks" maxlength="200" auto-height @input="textChange" class="textArea"
						placeholder="添加备注" style="font-size: 24rpx;color: #999;" />
				</view>
			</view>

		</view>
		<!-- 上次安检时间 -->
		<view class="ipts">
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>是否安检</text>
				</view>
				<view class="danger-img-box">
					<switch :checked="isChecked" @change="isChecked = !isChecked" style="transform:scale(0.7)" />
				</view>
			</view>

			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>是否签收《工商业用户安全检查记录表》</text>
				</view>
				<view class="danger-img-box">
					<view class="danger-img-box">
						<switch :checked="isChecked1" @change="isChecked1 = !isChecked1" style="transform:scale(0.7)" />
					</view>
				</view>
			</view>

			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>是否签收《工商业用户安全隐患整改通知书》</text>
				</view>
				<view class="danger-img-box">
					<view class="danger-img-box">
						<switch :checked="isChecked2" @change="isChecked2 = !isChecked2" style="transform:scale(0.7)" />
					</view>
				</view>
			</view>

			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<text>是否派发安全宣传资料</text>
				</view>
				<view class="danger-img-box">
					<view class="danger-img-box">
						<switch :checked="isChecked3" @change="isChecked3 = !isChecked3" style="transform:scale(0.7)" />
					</view>
				</view>
			</view>

		</view>
		<view class="history" @tap="$navTo('/pagesB/rithcheck/businessList?id='+user_info.id)">
			<image class="historyicon" src="/static/jilu.png" mode=""></image>
			<text class="text">安检记录</text>
		</view>
		<view class="btns">
			<view class="btn1 consel" @click="cancel">取消</view>
			<view class="btn1 save" @click="userPost">保存</view>
		</view>
		<cpimg ref="cpimg" @result="cpimgOk" @err="cpimgErr" :number="1" :fixOrientation="true" :size="500"
			:maxWidth="800" :ql="0.7" type="url" />
	</view>
</template>

<script>
	import cpimg from "@/components/cpimg/cpimg.vue"
	import easySelect from '@/components/easy-select/easy-select'
	export default {
		components: {
			easySelect,
			cpimg
		},
		data() {
			return {
				_header : {
					token: uni.getStorageSync('token'),
					'content-type': 'application/json'
				},
				
				signature: '',
				user_info: '',
				last_check: '',
				searchIpt: '',
				flag: true,
				list: {
					meterage_brand: '',
					inlet_pressure: '',
					product_brand: '',
					product_number: '',
					flow_brand: '',
					flow_type: '',
					flow_model: '',
					flow_number: '',
					mechanical_base: '',
					corrector_number: '',
					corrector_base: '',
					this_time: '',
					next_time: '',
					petrol: '',
					gas_brand: '',
					gas_type: '',
					power: '',
					flow_images: [],
					gas_fire_images: [],
					data_images: [],
					equipment_images: [],
					other_images: [],
					remarks: '',
					is_safe: 0,
					is_receive_inspect: 0,
					is_receive_improving: 0,
					is_sell: 0,
					user_id: '',
					danger_id:[],
					sign: '', //电子签名
				},
				isChecked: false,
				isChecked1: false,
				isChecked2: false,
				isChecked3: false,
				$img: 'https://trq.wqzsgas.com',
				option1: [],
				option2: [],
				option3: [],
				option4: [],
				option5: [],
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				show6: false,
				show7: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				sercode: [],
			}
		},
		onShow() {
              this._header ={
					token: uni.getStorageSync('token'),
					'content-type': 'application/json'
				}
		},
		onLoad(e) {
			this.init(e)
			
			wx.enableAlertBeforeUnload({
			    message: "是否返回上一页",
			});
		},
		methods: {
			confirm(e, option) {
				this.list[option] = e[0].label
			},
			times(e, time) {
				this.list[time] = e.year + '-' + e.month + '-' + e.day
			},
			selectiveType() {
				//计量柜品牌
				uni.request({
					url: this.$url + 'dictionary.gauger_band/getList',
					method: "POST",
					header: this._header,
					success: (res) => {
						if (res.data.code == 1) {
							this.option1 = res.data.data
						}
					}
				})
				//远传产品品牌
				uni.request({
					url: this.$url + 'dictionary.products_band/getList',
					method: "POST",
					header: this._header,
					success: (res) => {
						if (res.data.code == 1) {
							this.option2 = res.data.data
						}
					}
				})
				//流量计品牌 
				uni.request({
					url: this.$url + 'dictionary.flowmeter_band/getList',
					method: "POST",
					header: this._header,
					success: (res) => {
						if (res.data.code == 1) {
							this.option3 = res.data.data
						}
					}
				})
				//流量计类型 
				uni.request({
					url: this.$url + 'dictionary.flowmeter_type/getList',
					method: "POST",
					header: this._header,
					success: (res) => {
						if (res.data.code == 1) {
							this.option4 = res.data.data
						}
					}
				})
				//流量计型号
				uni.request({
					url: this.$url + 'dictionary.flowmeter_model/getList',
					method: "POST",
					header: this._header,
					success: (res) => {
						if (res.data.code == 1) {
							this.option5 = res.data.data
						}
					}
				})
			},
			cancel() {
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 400)
			},
			choosefrom(img) {
				if (this.list[img].length < 4) {
					var _this = this
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['camera', 'album'],
						success: (res) => {
							uni.uploadFile({
								url: _this.$fileImg + '/common/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								header: {
									token: uni.getStorageSync('token')
								},
								success: (uploadFileRes) => {
									if (JSON.parse(uploadFileRes.data).code == 1) {
										_this.list[img].push(JSON.parse(uploadFileRes.data).data
											.url)
									}
								},
								fail: (err) => {
									console.log(err);
								}
							})
						}
					})
				} else {
					this.$showToast('上传已达到限制')
				}
			},
			seeimg(img, index) {
				let arr = []
				let url = 'https://trq.wqzsgas.com';
				for (let i = 0; i < img.length; i++) {
					arr.push(url + img[i])
				}
				uni.previewImage({
					urls: arr,
					current: index,
					loop: true
				})
			},
			seek(img) {
				uni.previewImage({
					urls: [img]
				})
			},
			deletImg(imgs, index) {
				imgs.splice(index, 1)
			},
			init(e) {
				let that = this
				uni.request({
					url: that.$url + 'staff.business/searchUser',
					method: 'POST',
					header: {
						token: e.token,
					},
					data: {
						token: e.token,
						meter_num: e.meter_num
					},
					success: (res) => {
						if (res.data.code == 1) {
							that.user_info = res.data.data.user_info
							that.last_check = res.data.data.last_check
							this.selectiveType()
						} else {
							that.$showToast(res.data.msg)
							that.flag = true
							that.searchIpt = ''
						}
					}
				})
			},
			textChange(e) {
				if (e.detail.cursor >= 200) {
					this.$showToast('最多可以输入200个字')
				}
			},
			cpimgOk(file) {
				let that = this
				var ret = that.ret
				uni.showLoading({
					title: '上传中...'
				})
				uni.uploadFile({
					url: that.$fileImg + '/common/upload',
					filePath: file[0],
					name: 'file',
					formData: {
						token: that.token
					},
					success(res1) {
						let dataPath = JSON.parse(res1.data)
						if (dataPath.code == 1) {
							if (ret == '燃气表') {
								that.fileImg1 = dataPath.data.url
								that.img1 = file[0]
								// console.log(111)
							}
							if (ret == '燃气火点') {
								that.fileImg2.push(dataPath.data.url)
								that.img2.push(file[0])
							}
							if (ret == '资料') {
								that.fileImg3.push(dataPath.data.url)
								that.img3.push(file[0])
							}
							if (ret == '其他') {
								that.fileImg4 = dataPath.data.url
								that.img4 = file[0]
							}
						}
						uni.hideLoading()
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '上传失败'
						})
					}
				});


			},

			cpimgErr(e) {
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				})
				console.log(e)
			},
			// 提交保存
			userPost() {

				let _this = this
				_this.list.user_id = _this.user_info.id
				_this.list.sign = _this.signature.url
				if (!_this.list.meterage_brand) return _this.$showToast('请选择计量柜品牌')
				if (!_this.list.inlet_pressure) return _this.$showToast('请输入供气压力')
				if (!_this.list.product_brand) return _this.$showToast('请选择远传产品品牌')
				if (!_this.list.product_number) return _this.$showToast('请输入远传产品编号')
				if (!_this.list.flow_brand) return _this.$showToast('请选择流量计品牌')
				if (!_this.list.flow_type) return _this.$showToast('请选择流量计类型')
				if (!_this.list.flow_model) return _this.$showToast('请选择流量计型号')
				if (!_this.list.flow_number) return _this.$showToast('请输入流量计编号')
				if (!_this.list.mechanical_base) return _this.$showToast('请输入机械表底数')
				if (!_this.list.corrector_number) return _this.$showToast('请输入修正仪编号')
				if (!_this.list.corrector_base) return _this.$showToast('请输入修正仪底数')
				if (!_this.list.this_time) return _this.$showToast('请选择本次检定日期')
				if (!_this.list.next_time) return _this.$showToast('请选择下次检定日期')
				if (!_this.list.petrol) return _this.$showToast('请输入油量')
				if (!_this.list.gas_brand) return _this.$showToast('请输入燃气具品牌')
				if (!_this.list.gas_type) return _this.$showToast('请输入燃气具种类')
				if (!_this.list.power) return _this.$showToast('请输入功率')
				// if(_this.list.flow_images.length<1) return _this.$showToast('请输入流量计照片')
				// if(_this.list.gas_fire_images.length<1) return _this.$showToast('请输入燃气火点照片')
				// if(_this.list.data_images.length<1) return _this.$showToast('请输入资料照片')
				// if(_this.list.equipment_images.length<1) return _this.$showToast('请输入设备照片')
				// if(_this.list.other_images.length<1) return _this.$showToast('请输入其他照片')
				if (!_this.list.sign) return _this.$showToast('请先进行签名')
				if (!_this.list.remarks) return _this.$showToast('请输入备注')
				

				if (this.isChecked) {
					this.list.is_safe = 1
				} else {
					this.list.is_safe = 0
				}
				if (this.isChecked1) {
					this.list.is_receive_inspect = 1
				} else {
					this.list.is_receive_inspect = 0
				}
				if (this.isChecked2) {
					this.list.is_receive_improving = 1
				} else {
					this.list.is_receive_improving = 0
				}
				if (this.isChecked3) {
					this.list.is_sell = 1
				} else {
					this.list.is_sell = 0
				}
				this.list.danger_id = this.sercode

				uni.request({
					url: _this.$url + '/staff.business/security',
					method: 'POST',
					header: _this._header,
					data: _this.list,
					success: (res) => {
						console.log('sercode', this.sercode);
						_this.$showToast(res.data.msg)
						if (res.data.code == 1) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					}
				})
			},
			searNum() {

				let that = this
				if (that.searchIpt == '') {
					uni.showToast({
						title: '请输入要搜索的编号',
						icon: 'none'
					})
					return
				}

				that.$request.request({
					url: '/staff/user_search',
					method: 'POST',
					data: {
						token: that.token,
						meter_num: that.searchIpt
					}
				}).then(res => {
					// console.log(res)

					if (res.data.code == 1) {
						that.user_info = res.data.data.user_info
						that.last_check = res.data.data.last_check
						that.flag = false;
						that.mysearchIpt = true;
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						that.flag = true
						that.searchIpt = ''
					}
				})


			},
			searChange(e) {
				// console.log(e.detail)
				if (e.detail.value == '') {
					this.flag = false
				}
			},
			clousText() {
				this.flag = true
				this.searchIpt = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F1F1F1;
		padding-bottom: 100rpx;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// padding: 30rpx 30rpx;
			background-color: #F1F1F1;

			.header-right {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #333;
				// margin-right: 20rpx;
				padding: 10rpx 30rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}

		.header1 {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			height: 80rpx;
			width: 100%;
			background-color: #003690;
			padding: 0 30rpx;

			.ipt-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20rpx;
				width: 450rpx;
				height: 52rpx;
				background-color: #fff;
				border-radius: 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.header1-right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #E2ECFB;
				flex: 1;
				justify-content: center;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.newstyle {
			background: #003690;
			color: #FFFFFF;
		}

		// 气表模块
		.gasmeter {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			// padding: 20rpx 30rpx;
			background: #FFFFFF;
			border-bottom: 1rpx solid #eee;

			.renewal {
				width: 33.3%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
			}

		}

		.searShow {
			width: 360rpx;
			height: 254rpx;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			image {
				width: 100%;
				height: 100%;
			}
		}

		.dataCont {
			padding-top: 12rpx;
			padding-left: 42rpx;
			padding-right: 30rpx;

			.searTitle {
				font-size: 32rpx;
				font-weight: 600;
				text-align: left;
				color: #333333;
			}

			.searResult {
				display: flex;
				justify-content: space-between;

				.resText {
					font-size: 32rpx;
					font-weight: 400;
					text-align: left;
					color: #777777;
				}

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.ipts {
			background-color: #fff;
			margin-bottom: 20rpx;

			.liaison {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 30rpx;

				.left {
					display: flex;
					align-items: center;

					.shuxian {
						width: 8rpx;
						height: 28rpx;
						background: #003690;
						opacity: 1;
						border-radius: 200rpx;
						margin-right: 10rpx;
					}

					.name {
						font-size: 28rpx;
						font-family: Source Han Sans SC;
						font-weight: 500;
						color: #333333;
						margin-right: 10rpx;
					}

					.time {
						font-size: 24rpx;
						font-family: Source Han Sans SC;
						font-weight: 400;
						color: #777777;
					}
				}

				.right {
					display: flex;
					align-items: center;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}

					.phone {
						font-size: 24rpx;
						font-family: Source Han Sans SC;
						font-weight: 400;
						color: #555555;
					}
				}
			}
		}

		.info-item {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 0rpx 30rpx;
			background-color: #fff;
			font-size: 24rpx;
			color: #333;
			height: 100rpx;
			border-bottom: 1rpx solid #DDDDDD;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			input {
				flex: 1;
				text-align: right;
			}

			.dot {
				width: 8rpx;
				height: 8rpx;
				background-color: #003690;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.danger-img {
				position: relative;

				.updeletes {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 88;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.danger-img-box {
				display: flex;

				.danger-img {
					width: 75rpx;
					height: 75rpx;
					// border: 2rpx dashed #eee;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.danger-img-box2 {
				display: flex;

				.danger-img {
					width: 75rpx;
					height: 75rpx;
					// border: 2rpx dashed #eee;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
						opacity: 1;
					}
				}
			}

			.info-item-left {
				display: flex;
				align-items: center;
				font-size: 28rpx;
			}

			.addform-items {
				display: flex;
				align-items: center;

				.delet {
					position: absolute;
					top: -8rpx;
					right: 4rpx;
					width: 28rpx;
					height: 28rpx;
					z-index: 10;
				}

				.form-img {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}

				.add {
					width: 60rpx;
					height: 60rpx;
					border: 1rpx solid #DDDDDD;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.hengxian {
			width: 700rpx;
			height: 2rpx;
			background-color: #eee;
			margin: 20rpx auto;
		}

		.place-class {
			font-size: 28rpx;
			color: #999;
		}

		.btn {
			width: 646rpx;
			height: 80rpx;
			margin: 74rpx auto;
			text-align: center;
			line-height: 80rpx;
			border-radius: 40rpx;
			background-image: linear-gradient(to bottom, #2366D5, #001B48);
			font-size: 32rpx;
			color: #E5EFFE;
		}

		.btns {
			position: fixed;
			bottom: 0;
			display: flex;
			width: 100%;
			z-index: 333;

			.btn1 {
				width: 50%;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				font-size: 24rpx;
			}

			.consel {
				background-color: #e9e9e9;
				color: #777;
			}

			.save {
				background-color: #003690;
				color: #fff;
			}
		}

		.btn:active {
			background: rgba(0, 0, 0, 0.4);
		}

		.zhanwei {
			height: 250rpx;
		}

		.record {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #003690;
			font-size: 32rpx;
			padding-top: 20rpx;

			.right {
				width: 394rpx;
				height: 52rpx;
				background: #F2F2F2;
				opacity: 1;
				border-radius: 50rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin: 0 20rpx 0 30rpx;
			}
		}

		.record-item {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 30rpx;
			border-bottom: 2rpx solid #eee;

			.record-item-left {
				display: flex;
				align-items: center;

				.shu {
					width: 8rpx;
					height: 28rpx;
					background-color: #003690;
					border-radius: 8rpx;
				}

				.title {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
					margin: 0 10rpx;
				}

				.time {
					font-size: 24rpx;
					color: #777;
				}
			}

			.record-item-right {
				display: flex;
				align-items: center;

				.dianhua {
					width: 28rpx;
					height: 28rpx;
				}

				.zhankai {
					width: 36rpx;
					height: 36rpx;
				}

				.title {
					font-size: 32rpx;
					color: #555;
					font-weight: 500;
					margin: 0 10rpx;
				}
			}
		}

		.supplement {
			margin: 20rpx 24rpx;
			background-color: #fff;
			position: relative;
			overflow: hidden;

			.explain {
				.textArea {
					min-height: 142rpx;
					padding: 14rpx 30rpx;
					font-size: 32rpx;
					text-align: left;
					color: rgba(187, 187, 187, 0.84);
				}
			}

			.suppBottom {
				.danger-img {
					position: relative;
					margin-left: 50rpx;
					margin-bottom: 0rpx;
					width: 68rpx;
					height: 68rpx;
					float: left;

					image {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}

				.num {
					float: right;
					margin-right: 26rpx;
				}
			}
		}
	}

	.history {
		margin-top: 18rpx;
		padding: 20rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		.historyicon{
			width: 33rpx;
			height: 32rpx;
		}
		.text{
			margin-left: 12rpx;
			font-size: 28rpx;
			font-family: Source Han Sans SC;
			font-weight: 500;
			color: #003690;
		}
	}
</style>
